<!--
 * @Descripttion: 统计数量
 * @LastEditors: xzh
 * @LastEditTime: 2023-11-25 21:51:27
-->
<template>
  <!-- 数量 -->
  <el-card :class="['el-card-bottom-top', `produce-${produceGroup}`]">
    <div class="count-content">
      <!-- <div class="count-title">
        <DileTooltip
          :content="
            $t(
              `page.dashboardManageArr.produceDashboard.outputCountArr.${produceGroup}`
            )
          "
        />
      </div> -->
      <div class="content-icon">
        <SvgIcon
          v-if="icon"
          color="var(--el-color-white)"
          :size="2"
          :style="{ flex: '2rem 0 0' }"
          :name="produceIconMap[type] || 'account'"
        />
        <span>{{
          !!type
            ? $t(
                `page.dashboardManageArr.produceDashboard.outputCountArr.${type}`
              )
            : ""
        }}</span>
      </div>
    </div>
    <div v-if="count > -1" class="count-value">
      <CountTo
        :endVal="count"
        :decimals="!!ProduceDashboardUtils.isDecimals(type) ? 2 : 0"
      />
      <span v-if="!!ProduceDashboardUtils.isDecimals(type)">%</span>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { produceDataTypeEnum, produceIconMap } from "../index.type";
import { CountTo } from "vue3-count-to";
import SvgIcon from "@/assets/icons/index.vue";
import DileTooltip from "@/components/dile-tooltip/index.vue";
import ProduceDashboardUtils from "../utils";
const emit = defineEmits([]);
const props = defineProps({
  type: {
    type: String,
    requited: true,
    default: "",
  },
  produceGroup: {
    type: String,
    requited: true,
    default: "",
  },
  count: {
    type: Number,
    requited: true,
    default: 0,
  },
  loading: {
    type: Boolean,
    requited: true,
    default: true,
  },
  icon: {
    type: Boolean,
    requited: true,
    default: true,
  },
});
</script>
<style lang="scss" scoped>
.el-card {
  background-color: #00bfbf;
  flex: 5rem 0 0;
  &:is(.produce-quality) {
    background-color: lightpink;
  }
  &:is(.produce-cost) {
    background-color: lightskyblue;
  }
  color: var(--el-color-white);
  &:hover {
    box-shadow: 0px 0px 0.75rem rgba(0, 0, 0, 0.24) !important;
    cursor: pointer;
  }
  :deep(.el-card__body) {
    display: flex;
    height: 100% !important;
    padding: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--count-item-gap);
    .count-title {
      span {
        font-weight: 400;
        font-size: 1.5rem;
      }
    }
    .count-content {
      flex: 1;
      width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--count-item-gap);
      .content-icon {
        display: flex;
        align-items: center;
        gap: var(--count-item-gap);
        width: 100%;
        span {
          font-weight: 400;
          font-size: 1.0625rem;
        }
      }
    }
    .count-value {
      display: flex;
      color: #1d253b;
      font-weight: 500;
      font-size: 2rem;
    }
    span {
      color: var(--el-color-white) !important;
    }
    --count-item-gap: 0.5rem;
  }
}
</style>
